<template>
  <div>
    <div class="cover-box" @click="dialogVisible=true">
      <img v-if='value' :src="value">
      <span v-else></span>

    </div>
    <el-dialog :visible.sync="dialogVisible" width="50%" @close='DialogClose'>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="素材库" name="all">
          <image-list ref="imageListRef" :is-show-add='false' :is-show-action='false' :is-show-selected='true' />
        </el-tab-pane>
        <el-tab-pane label="上传图片" name="upload">
          <div class="upload-dialog">
            <label for="file">
              <img v-if='proviewImage' :src='proviewImage'>
              <span v-else></span>
            </label>
            <input type="file" id='file' ref="fileRef" @change="onFileChange" hidden>
          </div>
        </el-tab-pane>

      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading='Btnloading' type="primary" @click="onConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImageList from '@/components/image/components/image-list.vue'
import { uploadImage } from '@/api/user.js'
export default {
  components: {
    'image-list': ImageList
  },
  props: ['value'],
  data() {
    return {
      dialogVisible: false,
      activeName: 'all',
      Btnloading: false,
      proviewImage: null
    }
  },
  methods: {
    onConfirm() {
      if (this.activeName === 'all') {
        const img = this.$refs.imageListRef
        const selected = this.$refs.imageListRef.selected

        if (selected === null) {
          return this.$message.success('请选择封面图片')
        }
        this.$emit('input', img.imageList[selected].url)
        this.dialogVisible = false
      } else if (this.activeName === 'upload') {
        console.log(this.proviewImage + '' + '-----')
        if (this.proviewImage === null) {
          return this.$message.error('请选择上传图片')
        }
        const fd = new FormData()
        fd.append('image', this.proviewImage)
        this.Btnloading = true
        uploadImage(fd)
          .then(res => {
            this.$emit('input', res.data.data.url)
            this.$message.success('图片上传成功！')
            this.dialogVisible = false
            this.Btnloading = false
          })
          .catch(() => {
            this.$message.error('图片上传失败,请重试!')
            this.Btnloading = false
          })
      }
    },
    DialogClose() {
      this.$refs.imageListRef.selected = null
      this.proviewImage = null
    },
    onFileChange() {
      const file = this.$refs.fileRef.files[0]
      this.proviewImage = window.URL.createObjectURL(file)
    }
  }
}
</script>

<style scoped>
.cover-box {
  width: 180px;
  height: 180px;
  margin-right: 15px;
  border: 1px dashed #ccc;
}
.cover-box img,
.cover-box span {
  width: 100%;
  height: 100%;
}
.cover-box span {
  display: inline-block;
  background: url('./pic_bg.png') no-repeat center;
}
.upload-dialog {
  text-align: center;
}
.upload-dialog label {
  display: inline-block;
  width: 180px;
  height: 180px;
  border: 1px solid #ccc;
}
.upload-dialog img,
.upload-dialog span {
  width: 100%;
  height: 100%;
}
.upload-dialog span {
  display: inline-block;
  background: url('./pic_bg.png') no-repeat center;
}
</style>
